<template>
  <common-page class="set-important-data" title="设置重要数据">
    <el-button slot="header" @click="$emit('close')">返回</el-button>
    <el-button
      slot="header"
      type="primary"
      @click="submit"
      :loading="headerLoading"
      >保存</el-button
    >

    <div class="set-important-data__container" slot="content">
      <div class="container-top">
        <div class="item">
          <span>业务系统：</span>
          <span class="item-info">
            <common-tooltip-text
              :content="info.applicationSystem"
            ></common-tooltip-text>
          </span>
        </div>
        <div class="item">
          <span>数据库：</span>
          <span class="item-info">
            <common-tooltip-text :content="info.dbName"></common-tooltip-text>
          </span>
        </div>
        <div class="item">
          <span>表名：</span>
          <span class="item-info">
            <common-tooltip-text
              :content="info.tableName"
            ></common-tooltip-text>
          </span>
        </div>
        <div class="item">
          <span>表描述：</span>
          <span class="item-info">
            <common-tooltip-text
              :content="info.tableRemark"
            ></common-tooltip-text>
          </span>
        </div>
      </div>
      <el-button
        type="primary"
        class="set-btn"
        plain
        icon="el-icon-upload2"
        @click="handleSet"
        :disabled="!ids.length"
        v-if="type === 'table'"
        >批量设置
      </el-button>

      <div
        class="import-data-table-container"
        :class="{ 'no-btn-height': type !== 'table' }"
      >
        <common-table
          :data="tempList"
          border
          v-loading="loading"
          class="import-data-table"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            prop="columnName"
            align="left"
            label="列名"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="columnRemark"
            align="left"
            label="描述"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="left" show-overflow-tooltip>
            <template slot="header" slot-scope="scope">
              <div class="custom-header">
                <span>样本（{{ nums }}条）</span>

                <el-dropdown @command="moreTool($event)">
                  <span
                    class="el-dropdown-link"
                    style="cursor: pointer; margin-left: 8px; font-size: 12px"
                  >
                    <i
                      class="iconfont icon-xitongpeizhi"
                      style="font-size: 12px"
                    ></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" class="size">
                    <el-dropdown-item command="two"> 显示2条 </el-dropdown-item>
                    <el-dropdown-item command="five">
                      显示5条
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
            <template slot-scope="scope">
              <div
                v-for="(item, index) in scope.row.remark"
                :key="index"
                :style="{ height: `calc(100% / ${scope.row.remark.length})` }"
                :class="[
                  'column-style',
                  index === scope.row.remark.length - 1
                    ? 'last-column-style'
                    : '',
                ]"
              >
                <span class="column-custom-content">{{ item }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="重要数据" align="left" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-cascader
                style="width: 100%"
                :options="dataList"
                v-model="list[scope.$index].typeIds"
                :show-all-levels="false"
                :props="cascaderProps"
                checkStrictly
                clearable
                @change="changeType"
              >
                <template slot-scope="{ node, data }">
                  <common-marquee-text
                    :content="data.typeName"
                  ></common-marquee-text>
                </template>
              </el-cascader>
            </template>
          </el-table-column>
        </common-table>
      </div>
    </div>

    <common-edit-dialog
      title="设置重要数据"
      :visible.sync="open"
      @cancel="cancel"
      @submit="submitForm"
      :buttonLoading="buttonLoading"
      :info-loading="infoUpdateLoading"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        @submit.native.prevent
      >
        <el-form-item label="已选择：">
          <el-tag
            style="margin-right: 12px"
            type="success"
            v-for="(item, index) in chooseColumnName"
            closable
            @close="handleClose(index)"
            >{{ item }}</el-tag
          >
        </el-form-item>
        <el-form-item label="重要数据：">
          <el-cascader
            ref="cascader"
            style="width: 100%"
            :options="dataList"
            v-model="form.chooseIds"
            :show-all-levels="false"
            :props="cascaderProps"
            checkStrictly
            clearable
          >
            <template slot-scope="{ node, data }">
              <common-marquee-text
                :content="data.typeName"
              ></common-marquee-text>
            </template>
          </el-cascader>
        </el-form-item>
      </el-form>
    </common-edit-dialog>
  </common-page>
</template>

<script>
import { queryTreeList } from "@/api/datascan/importdata";
import BaseList from "@/mixins/BaseList";
import Index from "../mixins/index.vue";
import { updateImpData } from "@/api/datascan/scanresults/column";

export default {
  name: "setImportData",
  mixins: [BaseList, Index],
  props: {
    info: {
      type: Object,
      default: () => null,
    },
    type: {
      type: String,
      default: () => "column",
    },
  },
  data() {
    return {
      list: [],
      headerLoading: false,
      loading: false,
      dataList: [], //重要数据列表
      cascaderProps: {
        label: "typeName",
        value: "typeId",
        multiple: true,
        emitPath: false,
      },
      open: false,
      buttonLoading: false,
      infoUpdateLoading: false,
      key: "importantIds",
    };
  },
  mounted() {
    this.initDataByNums(2);
    this.getDataList();
  },
  methods: {
    submit() {
      let { typeIds, list } = this.handleData();
      let params = {
        id: this.info.scanResultId,
        list,
        typeIds: [...new Set(typeIds.flat(Infinity))].join(","),
      };
      this.headerLoading = true;

      this.$emit("save", params);
    },

    getDataList() {
      queryTreeList().then((res) => {
        if (res && res.code === 200) {
          this.dataList = res.data;
        } else {
          this.dataList = [];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./styles.scss";
</style>
